<template>
  <div class="d-flex align-content-center justify-center" style="width: 100%">
    <div class="play-time">
      {{ handlerFormatSeconds(currentTime) }}
    </div>
    <div style="width: 100%; padding: 0px 10px; box-sizing: border-box">
      <v-slider
        v-model="sliderVal"
        @start="sliderStart"
        @end="sliderEnd"
        @change="sliderChange"
        @click="sliderClick"
      ></v-slider>
    </div>
    <div class="play-time">
      {{ handlerFormatSeconds(durition) }}
    </div>
  </div>
</template>
<script>
import { formatSeconds } from "../utils/common";
export default {
  name: "PlaySlider",
  props: {
    currentTime: {
      type: [String, Number],
      default: 0,
    },
    durition: {
      type: [String, Number],
      default: 0,
    },
    value: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sliderVal: this.value,
    };
  },
  methods: {
    sliderStart(num) {
      this.$emit("start", num);
    },
    sliderEnd(num) {
      this.$emit("end", num);
    },
    sliderChange(num) {
      this.$emit("change", num);
    },
    sliderClick(num) {
      this.$emit("click", num);
    },
    handlerFormatSeconds(num) {
      return formatSeconds(num);
    },
  },
  watch: {
    currentTime: function (num) {
      this.currentTime = num;
    },
    durition: function (num) {
      this.durition = num;
    },
    value: function (num) {
      this.value = num;
      this.sliderVal = num;
    },
  },
};
</script>

<style scoped>
::v-deep .v-input__slot {
  margin-bottom: 0px !important;
}
::v-deep .v-messages {
  min-height: 0px !important;
}
.play-time {
  color: #bdbdbd;
  font-size: 8px;
  line-height: 28px;
}
</style>
